<script setup lang="ts">
import { ref } from 'vue'

const r = ref(238)
const g = ref(63)
const b = ref(77)
const a = ref(1)
</script>

<template>
  <div class="container">
    <div class="result" :style="{ backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})` }"></div>
    <div>
      红色：{{ r }}
      <n-slider
        v-model:value="r"
        :step="1"
        :max="255"
        style="--n-fill-color: red; --n-fill-color-hover: red"
      />
    </div>
    <div>
      绿色：{{ g }}
      <n-slider
        v-model:value="g"
        :step="1"
        :max="255"
        style="--n-fill-color: green; --n-fill-color-hover: green"
      />
    </div>
    <div>
      蓝色：{{ b }}
      <n-slider
        v-model:value="b"
        :step="1"
        :max="255"
        style="--n-fill-color: blue; --n-fill-color-hover: blue"
      />
    </div>
    <div>
      透明：{{ a }}
      <n-slider
        v-model:value="a"
        :step="0.01"
        :max="1"
        style="--n-fill-color: gray; --n-fill-color-hover: gray"
      />
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 500px;
  margin: 100px auto 0;
}
.result {
  width: 500px;
  height: 500px;
  border-radius: 50%;
}
</style>
